import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class index extends Component {
  // 对接受的props进行类型和必要性限制
  static propTypes = {
    selectAll: PropTypes.func.isRequired,
    todos: PropTypes.array.isRequired,

  }
  selectAll = (e) => {
      console.log('selectAll', e.target.checked)
      this.props.selectAll(e.target.checked)
  }
  clearFinish = () => {
    if(this.props.todos.filter(item=>item.done).length === 0) return alert('没有已完成的任务可以清除')
    this.props.clearFinish()
}
  render() {
    const { todos } = this.props
    const finish = todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
    const total = todos.length

    return (
        <div className="todo-footer">
            <label>
            <input type="checkbox" onChange={this.selectAll} checked={finish === total && total !== 0? true : false}/>
            </label>
            <span>
            <span>已完成{finish}</span> / 全部{total}
            </span>
            <button className="btn btn-danger" onClick={this.clearFinish}>清除已完成任务</button>
        </div>
    )
  }
}
